<div class="content-section introduction">
    <div class="feature-intro">
        <h1>DataTable <span>Scroll</span></h1>
        <span>Scrollable view is available horizontally, vertically or both.</span>
    </div>
    <app-demoActions github="table" stackblitz="tablescroll-demo"></app-demoActions>
</div>

<div class="content-section implementation">
    <div class="card">
        <h5>Vertical</h5>
        <p-table [value]="customers" [scrollable]="true" scrollHeight="400px">
            <ng-template pTemplate="header">
                <tr>
                    <th style="min-width:200px">Name</th>
                    <th style="min-width:200px">Country</th>
                    <th style="min-width:200px">Company</th>
                    <th style="min-width:200px">Representative</th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-customer>
                <tr>
                    <td style="min-width:200px">{{customer.name}}</td>
                    <td style="min-width:200px">{{customer.country.name}}</td>
                    <td style="min-width:200px">{{customer.company}}</td>
                    <td style="min-width:200px">{{customer.representative.name}}</td>
                </tr>
            </ng-template>
        </p-table>
    </div>

    <div class="card">
        <h5>Flexible Viewport</h5>
        <p>Flex scroll feature makes the scrollable viewport section dynamic so that it can grow or shrink relative to the parent size of the table. Click the button below
            to display a resizable and maximizable Dialog where data viewport adjusts itself according to the size changes.</p>

        <button type="button" (click)="showDialog()" pButton icon="pi pi-external-link" label="View"></button>
        <p-dialog header="Header" [resizable]="false" [modal]="true" [maximizable]="true" appendTo="body" [(visible)]="dialogVisible" [style]="{width: '75vw'}" [contentStyle]="{height: '300px'}">
            <p-table [value]="customers" [scrollable]="true" scrollHeight="flex">
                <ng-template pTemplate="header">
                    <tr>
                        <th style="min-width:200px">Name</th>
                        <th style="min-width:200px">Country</th>
                        <th style="min-width:200px">Company</th>
                        <th style="min-width:200px">Representative</th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-customer>
                    <tr>
                        <td style="min-width:200px">{{customer.name}}</td>
                        <td style="min-width:200px">{{customer.country.name}}</td>
                        <td style="min-width:200px">{{customer.company}}</td>
                        <td style="min-width:200px">{{customer.representative.name}}</td>
                    </tr>
                </ng-template>
            </p-table>
            <ng-template pTemplate="footer">
                <button type="button" pButton pRipple icon="pi pi-times" (click)="dialogVisible=false" label="Dismiss" class="p-button-text"></button>
            </ng-template>
        </p-dialog>

        <h5>Full Page Scroll</h5>
        <p>FlexScroll can also be used for cases where scrollable viewport should be responsive with respect to the window size. See the <a [routerLink]="['/table/flexscroll']">Full Page</a> demo for an example.</p>
    </div>

    <div class="card">
        <h5>Horizontal and Vertical</h5>

        <p-table [value]="customers" [scrollable]="true"  scrollHeight="400px" scrollDirection="both">
            <ng-template pTemplate="header">
                <tr>
                    <th style="width:100px">Id</th>
                    <th style="width:200px">Name</th>
                    <th style="width:200px">Country</th>
                    <th style="width:200px">Date</th>
                    <th style="width:200px">Balance</th>
                    <th style="width:200px">Company</th>
                    <th style="width:200px">Status</th>
                    <th style="width:200px">Activity</th>
                    <th style="width:200px">Representative</th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-customer>
                <tr>
                    <td style="width:100px">{{customer.id}}</td>
                    <td style="width:200px">{{customer.name}}</td>
                    <td style="width:200px">{{customer.country.name}}</td>
                    <td style="width:200px">{{customer.date}}</td>
                    <td style="width:200px">{{formatCurrency(customer.balance)}}</td>
                    <td style="width:200px">{{customer.company}}</td>
                    <td style="width:200px">{{customer.status}}</td>
                    <td style="width:200px">{{customer.activity}}</td>
                    <td style="width:200px">{{customer.representative.name}}</td>
                </tr>
            </ng-template>
            <ng-template pTemplate="footer">
                <tr>
                    <td style="width:100px">Id</td>
                    <td style="width:200px">Name</td>
                    <td style="width:200px">Country</td>
                    <td style="width:200px">Date</td>
                    <td style="width:200px">Balance</td>
                    <td style="width:200px">Company</td>
                    <td style="width:200px">Status</td>
                    <td style="width:200px">Activity</td>
                    <td style="width:200px">Representative</td>
                </tr>
            </ng-template>
        </p-table>
    </div>

    <div class="card">
        <h5>Frozen Rows</h5>
        <p-table [value]="unlockedCustomers" [frozenValue]="lockedCustomers" [scrollable]="true" scrollHeight="400px">
            <ng-template pTemplate="header">
                <tr>
                    <th>Name</th>
                    <th>Country</th>
                    <th>Company</th>
                    <th>Representative</th>
                    <th style="flex: 0 0 4rem"></th>
                </tr>
            </ng-template>
            <ng-template pTemplate="frozenbody" let-customer let-index="rowIndex">
                <tr>
                    <td>{{customer.name}}</td>
                    <td>{{customer.country.name}}</td>
                    <td>{{customer.company}}</td>
                    <td>{{customer.representative.name}}</td>
                    <td style="flex: 0 0 4rem">
                        <button pButton pRipple type="button" [icon]="'pi pi-lock-open'" (click)="toggleLock(customer,true,index)" class="p-button-sm p-button-text"></button>
                    </td>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-customer let-index="rowIndex">
                <tr>
                    <td>{{customer.name}}</td>
                    <td>{{customer.country.name}}</td>
                    <td>{{customer.company}}</td>
                    <td>{{customer.representative.name}}</td>
                    <td style="flex: 0 0 4rem">
                        <button pButton pRipple type="button" [icon]="'pi pi-lock'" [disabled]="lockedCustomers.length >= 2" (click)="toggleLock(customer,false,index)" class="p-button-sm p-button-text"></button>
                    </td>
                </tr>
            </ng-template>
        </p-table>
    </div>

    <div class="card">
        <h5>Frozen Columns</h5>
        <p-toggleButton [(ngModel)]="balanceFrozen" [onIcon]="'pi pi-lock'" offIcon="pi pi-lock-open" [onLabel]="'Unfreeze Balance'" offLabel="Freeze Balance" [style]="{'width': '12rem'}"></p-toggleButton>

        <p-table [value]="customers" scrollDirection="both" [scrollable]="true" scrollHeight="400px" styleClass="mt-3">
            <ng-template pTemplate="header">
                <tr>
                    <th style="width:200px" pFrozenColumn>Name</th>
                    <th style="width:100px">Id</th>
                    <th style="width:200px">Country</th>
                    <th style="width:200px">Date</th>
                    <th style="width:200px">Company</th>
                    <th style="width:200px">Status</th>
                    <th style="width:200px">Activity</th>
                    <th style="width:200px">Representative</th>
                    <th style="width:200px" alignFrozen="right" pFrozenColumn [frozen]="balanceFrozen">Balance</th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-customer>
                <tr>
                    <td style="width:200px" pFrozenColumn>{{customer.name}}</td>
                    <td style="width:100px">{{customer.id}}</td>
                    <td style="width:200px">{{customer.country.name}}</td>
                    <td style="width:200px">{{customer.date}}</td>
                    <td style="width:200px">{{customer.company}}</td>
                    <td style="width:200px">{{customer.status}}</td>
                    <td style="width:200px">{{customer.activity}}</td>
                    <td style="width:200px">{{customer.representative.name}}</td>
                    <td style="width:200px" alignFrozen="right"  pFrozenColumn [frozen]="balanceFrozen">{{formatCurrency(customer.balance)}}</td>
                </tr>
            </ng-template>
        </p-table>
    </div>
    <div class="card">
        <h5>Subheader Grouping</h5>
        <p-table [value]="customers" sortField="representative.name" sortMode="single" [scrollable]="true" scrollHeight="400px" rowGroupMode="subheader" groupRowsBy="representative.name">
            <ng-template pTemplate="header">
                <tr>
                    <th style="min-width:200px">Name</th>
                    <th style="min-width:200px">Country</th>
                    <th style="min-width:200px">Company</th>
                    <th style="min-width:200px">Status</th>
                    <th style="min-width:200px">Date</th>
                </tr>
            </ng-template>
            <ng-template pTemplate="groupheader" let-customer>
                <tr pRowGroupHeader>
                    <td colspan="5">
                        <img [alt]="customer.representative.name" src="assets/showcase/images/demo/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle" />
                        <span class="font-bold ml-2">{{customer.representative.name}}</span>
                    </td>
                </tr>
            </ng-template>
            <ng-template pTemplate="groupfooter" let-customer>
                <tr>
                    <td style="text-align: right" class="font-bold pr-6">Total Customers: {{calculateCustomerTotal(customer.representative.name)}}</td>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-customer let-rowIndex="rowIndex">
                <tr>
                    <td style="min-width:200px">
                        {{customer.name}}
                    </td>
                    <td style="min-width:200px">
                        <img src="assets/showcase/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30">
                        <span class="image-text">{{customer.country.name}}</span>
                    </td>
                    <td style="min-width:200px">
                        {{customer.company}}
                    </td>
                    <td style="min-width:200px">
                        <span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
                    </td>
                    <td style="min-width:200px">
                        {{customer.date}}
                    </td>
                </tr>
            </ng-template>
        </p-table>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/table/" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-tablescroll-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="card"&gt;
    &lt;h5&gt;Vertical&lt;/h5&gt;
    &lt;p-table [value]="customers" [scrollable]="true" scrollHeight="400px"&gt;
        &lt;ng-template pTemplate="header"&gt;
            &lt;tr&gt;
                &lt;th style="min-width:200px"&gt;Name&lt;/th&gt;
                &lt;th style="min-width:200px"&gt;Country&lt;/th&gt;
                &lt;th style="min-width:200px"&gt;Company&lt;/th&gt;
                &lt;th style="min-width:200px"&gt;Representative&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="body" let-customer&gt;
            &lt;tr&gt;
                &lt;td style="min-width:200px"&gt;&#123;&#123;customer.name&#125;&#125;&lt;/td&gt;
                &lt;td style="min-width:200px"&gt;&#123;&#123;customer.country.name&#125;&#125;&lt;/td&gt;
                &lt;td style="min-width:200px"&gt;&#123;&#123;customer.company&#125;&#125;&lt;/td&gt;
                &lt;td style="min-width:200px"&gt;&#123;&#123;customer.representative.name&#125;&#125;&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
    &lt;/p-table&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Flexible Viewport&lt;/h5&gt;
    &lt;p&gt;Flex scroll feature makes the scrollable viewport section dynamic so that it can grow or shrink relative to the parent size of the table. Click the button below
        to display a resizable and maximizable Dialog where data viewport adjusts itself according to the size changes.&lt;/p&gt;

    &lt;button type="button" (click)="showDialog()" pButton icon="pi pi-external-link" label="View"&gt;&lt;/button&gt;
    &lt;p-dialog header="Header" [resizable]="false" [modal]="true" [maximizable]="true" appendTo="body" [(visible)]="dialogVisible" [style]="&#123;width: '75vw'&#125;" [contentStyle]="&#123;height: '300px'&#125;"&gt;
        &lt;p-table [value]="customers" [scrollable]="true" scrollHeight="flex"&gt;
            &lt;ng-template pTemplate="header"&gt;
                &lt;tr&gt;
                    &lt;th style="min-width:200px"&gt;Name&lt;/th&gt;
                    &lt;th style="min-width:200px"&gt;Country&lt;/th&gt;
                    &lt;th style="min-width:200px"&gt;Company&lt;/th&gt;
                    &lt;th style="min-width:200px"&gt;Representative&lt;/th&gt;
                &lt;/tr&gt;
            &lt;/ng-template&gt;
            &lt;ng-template pTemplate="body" let-customer&gt;
                &lt;tr&gt;
                    &lt;td style="min-width:200px"&gt;&#123;&#123;customer.name&#125;&#125;&lt;/td&gt;
                    &lt;td style="min-width:200px"&gt;&#123;&#123;customer.country.name&#125;&#125;&lt;/td&gt;
                    &lt;td style="min-width:200px"&gt;&#123;&#123;customer.company&#125;&#125;&lt;/td&gt;
                    &lt;td style="min-width:200px"&gt;&#123;&#123;customer.representative.name&#125;&#125;&lt;/td&gt;
                &lt;/tr&gt;
            &lt;/ng-template&gt;
        &lt;/p-table&gt;
        &lt;ng-template pTemplate="footer"&gt;
            &lt;button type="button" pButton pRipple icon="pi pi-times" (click)="dialogVisible=false" label="Dismiss" class="p-button-text"&gt;&lt;/button&gt;
        &lt;/ng-template&gt;
    &lt;/p-dialog&gt;

    &lt;h5&gt;Full Page Scroll&lt;/h5&gt;
    &lt;p&gt;FlexScroll can also be used for cases where scrollable viewport should be responsive with respect to the window size. See the &lt;a [routerLink]="['/table/flexscroll']"&gt;Full Page&lt;/a&gt; demo for an example.&lt;/p&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Horizontal and Vertical&lt;/h5&gt;

    &lt;p-table [value]="customers" [scrollable]="true"  scrollHeight="400px" scrollDirection="both"&gt;
        &lt;ng-template pTemplate="header"&gt;
            &lt;tr&gt;
                &lt;th style="width:100px"&gt;Id&lt;/th&gt;
                &lt;th style="width:200px"&gt;Name&lt;/th&gt;
                &lt;th style="width:200px"&gt;Country&lt;/th&gt;
                &lt;th style="width:200px"&gt;Date&lt;/th&gt;
                &lt;th style="width:200px"&gt;Balance&lt;/th&gt;
                &lt;th style="width:200px"&gt;Company&lt;/th&gt;
                &lt;th style="width:200px"&gt;Status&lt;/th&gt;
                &lt;th style="width:200px"&gt;Activity&lt;/th&gt;
                &lt;th style="width:200px"&gt;Representative&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="body" let-customer&gt;
            &lt;tr&gt;
                &lt;td style="width:100px"&gt;&#123;&#123;customer.id&#125;&#125;&lt;/td&gt;
                &lt;td style="width:200px"&gt;&#123;&#123;customer.name&#125;&#125;&lt;/td&gt;
                &lt;td style="width:200px"&gt;&#123;&#123;customer.country.name&#125;&#125;&lt;/td&gt;
                &lt;td style="width:200px"&gt;&#123;&#123;customer.date&#125;&#125;&lt;/td&gt;
                &lt;td style="width:200px"&gt;&#123;&#123;formatCurrency(customer.balance)&#125;&#125;&lt;/td&gt;
                &lt;td style="width:200px"&gt;&#123;&#123;customer.company&#125;&#125;&lt;/td&gt;
                &lt;td style="width:200px"&gt;&#123;&#123;customer.status&#125;&#125;&lt;/td&gt;
                &lt;td style="width:200px"&gt;&#123;&#123;customer.activity&#125;&#125;&lt;/td&gt;
                &lt;td style="width:200px"&gt;&#123;&#123;customer.representative.name&#125;&#125;&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="footer"&gt;
            &lt;tr&gt;
                &lt;td style="width:100px"&gt;Id&lt;/td&gt;
                &lt;td style="width:200px"&gt;Name&lt;/td&gt;
                &lt;td style="width:200px"&gt;Country&lt;/td&gt;
                &lt;td style="width:200px"&gt;Date&lt;/td&gt;
                &lt;td style="width:200px"&gt;Balance&lt;/td&gt;
                &lt;td style="width:200px"&gt;Company&lt;/td&gt;
                &lt;td style="width:200px"&gt;Status&lt;/td&gt;
                &lt;td style="width:200px"&gt;Activity&lt;/td&gt;
                &lt;td style="width:200px"&gt;Representative&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
    &lt;/p-table&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Frozen Rows&lt;/h5&gt;
    &lt;p-table [value]="unlockedCustomers" [frozenValue]="lockedCustomers" [scrollable]="true" scrollHeight="400px"&gt;
        &lt;ng-template pTemplate="header"&gt;
            &lt;tr&gt;
                &lt;th&gt;Name&lt;/th&gt;
                &lt;th&gt;Country&lt;/th&gt;
                &lt;th&gt;Company&lt;/th&gt;
                &lt;th&gt;Representative&lt;/th&gt;
                &lt;th style="flex: 0 0 4rem"&gt;&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="frozenbody" let-customer let-index="rowIndex"&gt;
            &lt;tr&gt;
                &lt;td&gt;&#123;&#123;customer.name&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;customer.country.name&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;customer.company&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;customer.representative.name&#125;&#125;&lt;/td&gt;
                &lt;td style="flex: 0 0 4rem"&gt;
                    &lt;button pButton pRipple type="button" [icon]="'pi pi-lock-open'" (click)="toggleLock(customer,true,index)" class="p-button-sm p-button-text"&gt;&lt;/button&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="body" let-customer let-index="rowIndex"&gt;
            &lt;tr&gt;
                &lt;td&gt;&#123;&#123;customer.name&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;customer.country.name&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;customer.company&#125;&#125;&lt;/td&gt;
                &lt;td&gt;&#123;&#123;customer.representative.name&#125;&#125;&lt;/td&gt;
                &lt;td style="flex: 0 0 4rem"&gt;
                    &lt;button pButton pRipple type="button" [icon]="'pi pi-lock'" [disabled]="lockedCustomers.length &gt;= 2" (click)="toggleLock(customer,false,index)" class="p-button-sm p-button-text"&gt;&lt;/button&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
    &lt;/p-table&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Frozen Columns&lt;/h5&gt;
    &lt;p-toggleButton [(ngModel)]="balanceFrozen" [onIcon]="'pi pi-lock'" offIcon="pi pi-lock-open" [onLabel]="'Unfreeze Balance'" offLabel="Freeze Balance" [style]="&#123;'width': '12rem'&#125;"&gt;&lt;/p-toggleButton&gt;

    &lt;p-table [value]="customers" scrollDirection="both" [scrollable]="true" scrollHeight="400px" styleClass="mt-3"&gt;
        &lt;ng-template pTemplate="header"&gt;
            &lt;tr&gt;
                &lt;th style="width:200px" pFrozenColumn&gt;Name&lt;/th&gt;
                &lt;th style="width:100px"&gt;Id&lt;/th&gt;
                &lt;th style="width:200px"&gt;Country&lt;/th&gt;
                &lt;th style="width:200px"&gt;Date&lt;/th&gt;
                &lt;th style="width:200px"&gt;Company&lt;/th&gt;
                &lt;th style="width:200px"&gt;Status&lt;/th&gt;
                &lt;th style="width:200px"&gt;Activity&lt;/th&gt;
                &lt;th style="width:200px"&gt;Representative&lt;/th&gt;
                &lt;th style="width:200px" alignFrozen="right" pFrozenColumn [frozen]="balanceFrozen"&gt;Balance&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="body" let-customer&gt;
            &lt;tr&gt;
                &lt;td style="width:200px" pFrozenColumn&gt;&#123;&#123;customer.name&#125;&#125;&lt;/td&gt;
                &lt;td style="width:100px"&gt;&#123;&#123;customer.id&#125;&#125;&lt;/td&gt;
                &lt;td style="width:200px"&gt;&#123;&#123;customer.country.name&#125;&#125;&lt;/td&gt;
                &lt;td style="width:200px"&gt;&#123;&#123;customer.date&#125;&#125;&lt;/td&gt;
                &lt;td style="width:200px"&gt;&#123;&#123;customer.company&#125;&#125;&lt;/td&gt;
                &lt;td style="width:200px"&gt;&#123;&#123;customer.status&#125;&#125;&lt;/td&gt;
                &lt;td style="width:200px"&gt;&#123;&#123;customer.activity&#125;&#125;&lt;/td&gt;
                &lt;td style="width:200px"&gt;&#123;&#123;customer.representative.name&#125;&#125;&lt;/td&gt;
                &lt;td style="width:200px" alignFrozen="right"  pFrozenColumn [frozen]="balanceFrozen"&gt;&#123;&#123;formatCurrency(customer.balance)&#125;&#125;&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
    &lt;/p-table&gt;
&lt;/div&gt;
&lt;div class="card"&gt;
    &lt;h5&gt;Subheader Grouping&lt;/h5&gt;
    &lt;p-table [value]="customers" sortField="representative.name" sortMode="single" [scrollable]="true" scrollHeight="400px" rowGroupMode="subheader" groupRowsBy="representative.name"&gt;
        &lt;ng-template pTemplate="header"&gt;
            &lt;tr&gt;
                &lt;th style="min-width:200px"&gt;Name&lt;/th&gt;
                &lt;th style="min-width:200px"&gt;Country&lt;/th&gt;
                &lt;th style="min-width:200px"&gt;Company&lt;/th&gt;
                &lt;th style="min-width:200px"&gt;Status&lt;/th&gt;
                &lt;th style="min-width:200px"&gt;Date&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="groupheader" let-customer&gt;
            &lt;tr pRowGroupHeader&gt;
                &lt;td colspan="5"&gt;
                    &lt;img [alt]="customer.representative.name" src="assets/showcase/images/demo/avatar/&#123;&#123;customer.representative.image&#125;&#125;" width="32" style="vertical-align: middle" /&gt;
                    &lt;span class="font-bold ml-2"&gt;&#123;&#123;customer.representative.name&#125;&#125;&lt;/span&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="groupfooter" let-customer&gt;
            &lt;tr&gt;
                &lt;td style="text-align: right" class="font-bold pr-6"&gt;Total Customers: &#123;&#123;calculateCustomerTotal(customer.representative.name)&#125;&#125;&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="body" let-customer let-rowIndex="rowIndex"&gt;
            &lt;tr&gt;
                &lt;td style="min-width:200px"&gt;
                    &#123;&#123;customer.name&#125;&#125;
                &lt;/td&gt;
                &lt;td style="min-width:200px"&gt;
                    &lt;img src="assets/showcase/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30"&gt;
                    &lt;span class="image-text"&gt;&#123;&#123;customer.country.name&#125;&#125;&lt;/span&gt;
                &lt;/td&gt;
                &lt;td style="min-width:200px"&gt;
                    &#123;&#123;customer.company&#125;&#125;
                &lt;/td&gt;
                &lt;td style="min-width:200px"&gt;
                    &lt;span [class]="'customer-badge status-' + customer.status"&gt;&#123;&#123;customer.status&#125;&#125;&lt;/span&gt;
                &lt;/td&gt;
                &lt;td style="min-width:200px"&gt;
                    &#123;&#123;customer.date&#125;&#125;
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
    &lt;/p-table&gt;
&lt;/div&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123; Component, OnInit &#125; from '@angular/core';
import &#123; Customer &#125; from '../../domain/customer';
import &#123; CustomerService &#125; from '../../service/customerservice';

@Component(&#123;
    templateUrl: './tablescrolldemo.html',
    styleUrls: ['./tablescrolldemo.css']
&#125;)
export class TableScrollDemo implements OnInit &#123;

    customers: Customer[];

    dialogVisible: boolean;

    scrollableCols: any[];

    unlockedCustomers: any[];

    lockedCustomers: any[];

    balanceFrozen: boolean = false;

    rowGroupMetadata: any;

    constructor(private customerService: CustomerService) &#123; &#125;

    ngOnInit() &#123;
        this.customerService.getCustomersMedium().then(data =&gt; &#123;
            this.customers = data
        &#125;);
        this.customerService.getCustomersMedium().then(data =&gt; this.unlockedCustomers = data);

        this.lockedCustomers = [
            &#123;
                id: 5135,
                name: "Geraldine Bisset",
                country: &#123;
                    name: "France",
                    code: "fr"
                &#125;,
                company: "Bisset Group",
                status: "proposal",
                date: "2019-05-05",
                activity: 0,
                representative: &#123;
                    name: "Amy Elsner",
                    image: "amyelsner.png"
                &#125;
            &#125;
        ];

        this.scrollableCols = [
            &#123; field: 'name', header: 'Name' &#125;,
            &#123; field: 'id', header: 'Id' &#125;,
            &#123; field: 'date', header: 'Date' &#125;,
            &#123; field: 'company', header: 'Company' &#125;,
            &#123; field: 'status', header: 'Status' &#125;,
            &#123; field: 'activity', header: 'Activity' &#125;
        ];
    &#125;

    showDialog() &#123;
        this.dialogVisible = true;
    &#125;

    toggleLock(data, frozen, index) &#123;
        if (frozen) &#123;
            this.lockedCustomers = this.lockedCustomers.filter((c, i) =&gt; i !== index);
            this.unlockedCustomers.push(data);
        &#125;
        else &#123;
            this.unlockedCustomers = this.unlockedCustomers.filter((c, i) =&gt; i !== index);
            this.lockedCustomers.push(data);
        &#125;

        this.unlockedCustomers.sort((val1, val2) =&gt; &#123;
            return val1.id &lt; val2.id ? -1 : 1;
        &#125;);
    &#125;

    calculateCustomerTotal(name) &#123;
        let total = 0;

        if (this.customers) &#123;
            for (let customer of this.customers) &#123;
                if (customer.representative.name === name) &#123;
                    total++;
                &#125;
            &#125;
        &#125;

        return total;
    &#125;

    formatCurrency(value) &#123;
        return value.toLocaleString('en-US', &#123;style: 'currency', currency: 'USD'&#125;);
    &#125;
&#125;
</app-code>

<app-code lang="css" ngNonBindable ngPreserveWhitespaces>
:host ::ng-deep  .p-frozen-column &#123;
    font-weight: bold;
&#125;
:host ::ng-deep .p-datatable-frozen-tbody &#123;
    font-weight: bold;
&#125;
</app-code>
        </p-tabPanel>

        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-tablescroll-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>
